<!DOCTYPE html>
<html>
	<head>
		<title>事件委托的优点</title>
		<meta charset="utf-8">
		<style type="text/css">
			#list{font-size: 40px;line-height:60px;width:400px;margin:50px auto; border: 2px solid;}
			#list li{list-style: none;height: 60px;margin:20px;border: 2px solid red;}
		</style>
	</head>
	<body>
		
		<ul id="list">
			 <li id="L1" >第1111111个</li>
			 <li id="L2" >第2222222个</li>
			 <li id="L3" >第3333333个</li>
		</ul>

		
		 <!-- 传统写法 -->
		<!--  <script>
			var list = document.getElementById("list");
			// 1.获取所有li
			var oLi = list.getElementsByTagName("li");
			// 2.for循环每个li，加点击事件
			
			
			
			console.log(oLi.length);//3，获取的节点只是HTML文档中原有节点，无js添加的
			
			console.time("a");//标记计时的开始
			for (var i =0; i< oLi.length; i++) {
				oLi[i].onclick = function(){
					console.log(this.innerHTML);	
				}
			}
			console.timeEnd("a");//标记计时的结束

			// js动态添加节点，添加后
			var L4 = document.createElement("li");
			L4.innerHTML = "item4";
			list.appendChild(L4);

			

			// 注意：此时事件加在li上 
		</script>   -->

		

		<!-- 事件委托的写法 -->
		<script>
			var list = document.getElementById("list");
			console.time("b");//标记计时的开始
			
			list.addEventListener("click",function(event){
				 var jieDian = event.target;//event.target指event对象的目标元素
				 console.log(" 事件委托的写法"+jieDian.innerHTML); 
			})

			console.timeEnd("b");//测试运行时间的结束

			// js动态添加节点，添加后
			
			var L4 = document.createElement("li");
			L4.innerHTML = "item4";
			list.appendChild(L4);

			// 注意：此时事件加在document上  document是li的祖先元素
		</script>  
	</body>
</html>